<template>
  <view class="typical_container" :class="half?'half':'whole'">
    <view class="floor_typical_title">
      <image :src="staticUrl()+'/new/floor_typical_more.png'" class="more" v-if="half"
        @click="clickJumpInfo">
      </image>
      <image :src="staticUrl()+'/new/floor_typical_more_dark.png'" class="more_dark" v-else
        @click="clickJumpInfo">
      </image>
    </view>
    <!-- 数据 -->
    <view v-if="half"></view>
    <view class="typical_list" v-else>
      <view v-for="(item, ins) in goodsList" :key="ins" @click="clickJumpInfo"
        class="typical_list_item">
        <image :src="item.image" alt="" class="item_image"></image>
        <view class="typical_goods">
          <view class="typical_goods_item" v-for="(i,jj) in item.skus.slice(0,3)" :key="jj">
            <view class="goods_img">
              <image v-if="i.inform" mode="aspectFit" :src="i.inform" class=" inform_announcement">
              </image>
              <ImageCache class="" :class="i.quantity ? '' : 'sellOut_container-img'"
                :src="i.original ? i.original : staticUrl() + '/home/defaultImg.png'"
                :mode="'aspectFit'" />
            </view>
            <view class="goodsName">
              <span class="ephedrine" v-if="i.ephedrine">含特</span>
              <span class="goods_name singleRowEllipsis"> {{ i.goodsName }} </span>
            </view>
            <view class="promotionPrice" v-if="hasToken() && i.promotionPrice">
              <text class="coinSymbol">￥</text>
              <text class="price" v-if="i.promotionPrice">{{ i.promotionPrice }}</text>
              <text class="packing">/{{ i.goodsUnit }}</text>
            </view>
            <view class="originalPrice" v-if="hasToken() && i.price">
              <text>￥</text>
              <text>{{ i.price }}</text>
            </view>
            <view class="prices singleRowEllipsis"
              v-if="hasToken() &&  ( !i.promotionPrice|| !i.price)">
              <text class="login_see">资质审核可见</text>
            </view>
            <view class="prices" v-if="!hasToken()">
              <text class="login_see">登录可见</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { activityData } from '@/api/home/index'

export default {
  props: {
    data: {
      type: Object,
      default: () => { }
    },
    half: {
      type: Boolean,
      default: () => { }
    }
  },
  data () {
    return {
      goodsList: [],
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 跳转 详情
    clickJumpInfo () {
      uni.navigateTo({
        url: `/subpackage/activity/typical?promotionType=${this.data.promotion.promotionType}&title=${this.data.promotion.title}`
      })
    },
    // 获取数据 组装数组
    getList () {
      activityData({ path: this.data.promotion.promotionGoodsPath }).then(res => {
        if (res.code === 200) {
          this.goodsList = res.data
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.half {
  background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/floor_typical_.png");
  height: 253rpx;
}
.whole {
  background-image: url("https://www.xdyy100.com/wholesale/files/mp/static/new/floor_typical.png");
  width: 702rpx;
  height: 929rpx;
}
.typical_container {
  background-size: 100%;
  background-repeat: no-repeat;

  .floor_typical_title {
    position: relative;
    .more {
      width: 104rpx;
      height: 44rpx;
      position: absolute;
      top: 35rpx;
      right: 24rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .more_dark {
      width: 104rpx;
      height: 36rpx;
      position: absolute;
      top: 35rpx;
      right: 24rpx;
    }
  }

  .typical_list {
    display: flex;
    flex-flow: column nowrap;
    margin: 0 18rpx 0 16rpx;
    padding-top: 87rpx;
    .typical_list_item {
      display: flex;
      align-items: center;

      .item_image {
        width: 187rpx;
        height: 264rpx;
      }
      .typical_goods {
        position: relative;
        width: 473rpx;
        height: 264rpx;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        border-radius: 8rpx;
        background: #fff;
        box-shadow: 0rpx 1rpx 1rpx 0rpx rgba(239, 35, 27, 0.5);
        margin-left: 11rpx;
        .typical_goods_item {
          width: 135rpx;
          height: 226rpx;
          background: #fff;
          border-radius: 8rpx;
          border: 1rpx solid rgba(178, 178, 178, 0.73);
          z-index: 1;
          .goods_img {
            width: 119rpx;
            height: 107rpx;
            margin: 14rpx 8rpx 8rpx;
          }
          .goodsName {
            display: flex;
            align-items: center;
            color: #333;
            margin: 0 12rpx;
            .goods_name {
              font-size: 22rpx;
            }
          }
          .promotionPrice {
            color: #ef231b;
            line-height: 1;
            white-space: nowrap;
            margin: 4rpx 8rpx;

            .coinSymbol {
              font-size: 14rpx;
            }
            .price {
              font-size: 22rpx;
              font-weight: bold;
              line-height: 1;
            }
            .packing {
              font-size: 14rpx;
              color: #999999;
            }
          }
          .originalPrice {
            font-size: 18rpx;
            color: #999;
            margin: 0 10rpx;
            text-decoration-line: line-through;
          }
          .prices {
            text-align: center;
            .login_see {
              font-size: 24rpx;
              color: #ef231b;
            }
          }
        }
        .typical_goods_item:nth-child(1) {
          margin-left: 18rpx;
        }
        .typical_goods_item:nth-child(2) {
          margin-left: 10rpx;
        }
        .typical_goods_item:nth-child(3) {
          margin-left: 10rpx;
        }
      }
      .typical_goods::after {
        content: "";
        display: inline-block;
        width: 451rpx;
        height: 246rpx;
        background: #ffffff;
        box-shadow: 0rpx 1rpx 1rpx 0rpx rgba(239, 35, 27, 0.5);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        position: absolute;
        top: 10rpx;
        left: 10rpx;
      }
    }
    .typical_list_item:nth-child(1) {
      .typical_goods {
        background: #ffd2cc;
        box-shadow: 0rpx 1rpx 1rpx 0rpx rgba(239, 35, 27, 0.5);
        border-radius: 8rpx;
      }
    }
    .typical_list_item:nth-child(2) {
      margin-top: 14rpx;
      .typical_goods {
        background: #ccf4ee;
        box-shadow: 0rpx 1rpx 1rpx 0rpx rgba(23, 206, 179, 0.5);
        border-radius: 8rpx;
      }
    }
    .typical_list_item:nth-child(3) {
      margin-top: 14rpx;
      .typical_goods {
        background: #aac6ff;
        box-shadow: 0rpx 1rpx 1rpx 0rpx rgba(40, 113, 252, 0.5);
        border-radius: 8rpx;
      }
    }
  }
}
</style>
